<template>
    <div class="page">
        <Title text="制片车间综合看板"></Title>
        <div class="main">
            <div class="main_item left">
                <div class="left_item productionModel">
                    <div class="boxTitle">#当前生产型号#</div>
                    <div class="allProductionModel">
                        <div class="movebox">
                            <div v-for="(item,index) in productionList" :key="index" class="productionitem">{{ item }}</div>
                        </div>
                    </div>
                </div>
                <div class="left_item progress">
                    <div class="boxTitle">在制工单进度>></div>
                    <div class="allProgress" >
                        <Progress v-for=" (item,index) in progressList" :key="item.id" :data="item" :index="index"></Progress>
                    </div>
                </div>
                <div class="left_item badModel">
                    <div class="boxTitle">当前型号不良TOP5>></div>
                    <div class="pie" ref="pieBox"></div>
                </div>
            </div>
            <div class="main_item center">
                <div class="excellentRate">
                    <div class="boxTitle">今日工序良率>></div>
                    <div class="lineAndBar" ref="lineAndBarBox"></div>
                </div>
                <div class="center_bottom">
                    <div class="detailing">
                        <div class="boxTitle">在制明细>></div>
                        <div class="firstRow">
                            <div style="width: 40%; text-align: center;">机台号</div>
                            <div style="width: 20%; text-align: center;">在制数/个</div>
                            <div style="width: 40%; text-align: center;">开始时间</div>
                        </div>
                        <div class="detailsbox">
                            <div class="movebox">
                                <div class="Row" v-for="(item,index) in detailList" :key="item.id" :class="(index%2)===0?'detailLight':''">
                                    <div style="width: 40%; text-align: center;">{{ item.name }}</div>
                                    <div style="width: 20%; text-align: center;">{{ item.number }}</div>
                                    <div style="width: 40%; text-align: center;">{{ item.beginTime }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detailed" >
                        <div class="boxTitle">结存明细>></div>
                        <div class="firstRow">
                            <div style="width: 70%; text-align: center;">工序</div>
                            <div style="width: 30%; text-align: center;">借存数/个</div>
                        </div>
                        <div class="detailsbox">
                            <div class="movebox">
                                <div class="Row" v-for="(item,index) in detailedList" :key="item.id" :class="(index%2)===0?'detailLight':''">
                                    <div style="width: 70%; text-align: center;">{{ item.name }}</div>
                                    <div style="width: 30%; text-align: center;">{{ item.number }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_item right">
                <div class="inspection">
                    <div class="boxTitle">品质检验情况>></div>
                    <div class="inspectionbox">
                        <div class="movebox">
                            <InspectionItem :data="item" v-for="item in inspectionList" :key="item.id"></InspectionItem>
                        </div>
                    </div>
                </div>
                <div class="maintenance">
                    <div class="boxTitle">设备维修保养情况>></div>
                    <div class="maintenancebox">
                        <MaintenanceBox></MaintenanceBox>
                    </div>
                </div>
                <div class="curve">
                    <div class="boxTitle">直通率曲线>></div>
                    <div class="line" ref="linebox"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import Title from '../components/Title.vue';
import Progress from '../components/Progress.vue';
import InspectionItem from '../components/InspectionItem.vue';
import MaintenanceBox from '../components/MaintenanceBox.vue';
import { defineComponent,ref,onMounted,markRaw, onUnmounted } from 'vue';
import { progressmock,badModel,excellentRate,detail,detailed,inspection,production,curve } from '../assets/mock.js';
console.log(document.styleSheets)
defineComponent({
    components:[Title,Progress,InspectionItem,MaintenanceBox]
})
const progressList = ref([])
const badModelLtis = ref([])
const excellentRateList = ref([])
const detailList = ref([])
const detailedList = ref([])
const inspectionList = ref([])
const productionList = ref([])
const curveList = ref([])

const pieBox = ref(null)
const pie = ref('')
const pieOption = ref({})
const lineAndBarBox = ref(null)
const lineAndBar = ref('')
const lineAndBarOption = ref({})
const linebox = ref(null)
const line = ref('')
const lineOption = ref({})
const timeout = ref('')
const intervaltime = ref('')

const setLineAndBarOption = ()=>{
    let operation = []
    let input = []
    let output = []
    let rate = []
    let max = 0
    excellentRateList.value.forEach(element => {
        operation.push(element.name)
        input.push(element.input)
        output.push(element.output)
        rate.push(Math.ceil((element.output/element.input)*100))
        if(element.input>max){
            max = element.input
        }
    })
    lineAndBarOption.value = {
        textStyle:{
            color:'#FFFFFF'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['投入', '产出', '良品率'],
            textStyle:{
                color:'#FFFFFF'
            }
        },
        xAxis: [
            {
                type: 'category',
                data: operation,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '个数',
                min: 0,
                max: max,
                interval: Math.ceil(max/5),
                axisLabel: {
                    formatter: '{value} 个'
                }
            },
            {
                type: 'value',
                name: '良品率',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series: [
            {
                name: '投入',
                type: 'bar',
                yAxisIndex: 0,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 个';
                    }
                },
                data: input,
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            },
            {
                name: '产出',
                type: 'bar',
                yAxisIndex: 0,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 个';
                    }
                },
                data: output,
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            },
            {
                name: '良品率',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' %';
                    }
                },
                data: rate,
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            }
        ]
    }
}
const createLineAndBarEchart = ()=>{
    lineAndBar.value = markRaw(echarts.init(lineAndBarBox.value))
    lineAndBar.value.setOption(lineAndBarOption.value)
}
const setPieOption = ()=>{
    pieOption.value = {
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: badModelLtis.value,
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
    }
}
const createPieEchart = ()=>{
    // 创建饼状图表
    pie.value = markRaw(echarts.init(pieBox.value))
    pie.value.setOption(pieOption.value)
}
const setlineOption = ()=>{
    let time = []
    let firstPassRate = []
    let achievementRate = []
    let theyield = []
    curveList.value.forEach(item=>{
        time.push(item.time)
        firstPassRate.push(item.firstPassRate)
        achievementRate.push(item.achievementRate)
        theyield.push(item.theyield)
    })
    lineOption.value = {
        textStyle:{
            color:'#FFFFFF'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:[
            {
                type: 'category',
                data: time,
                boundaryGap: false,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis:[
            {
                type: 'value',
                name: '',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value} %'
                }
            },
        ],
        legend: {
            data: ['直通率', '达成率', '总良率'],
            textStyle:{
                color:'#FFFFFF'
            }
        },
        series:[
            {
                name:'直通率',
                type: 'line',
                smooth: true,
                data: firstPassRate,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' %';
                    }
                },
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            },
            {
                name:'达成率',
                type: 'line',
                smooth: true,
                data: achievementRate,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' %';
                    }
                },
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            },
            {
                name:'总良率',
                type: 'line',
                smooth: true,
                data: theyield,
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' %';
                    }
                },
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            }
        ]
    }
}
const createLineEchart = ()=>{
    line.value = markRaw(echarts.init(linebox.value))
    line.value.setOption(lineOption.value)
}
const getDetailList = ()=>{
    detailList.value = [...detail]
}
const getProgressList = ()=>{
    // 获取在制工单进度数据
    progressList.value = [...progressmock]
}
const getBadModelList = ()=>{
    // 获取当前型号不良TOP5数据
    badModelLtis.value = [...badModel]
}
const getExcellentRateList = ()=>{
    excellentRateList.value = [...excellentRate]
}
const getDetailedList = ()=>{
    detailedList.value = [...detailed]
}
const getInspectionList = ()=>{
    inspectionList.value = [...inspection]
}
const getProductionList = ()=>{
    productionList.value = [...production]
}
const getCurveList = ()=>{
    curveList.value = [...curve]
}
const updataList = ()=>{
    intervaltime.value = setInterval(()=>{
        getProgressList()
        getBadModelList()
        getExcellentRateList()
        getDetailList()
        getDetailedList()
        getInspectionList()
        getProductionList()
        getCurveList()
        setLineAndBarOption()
        setPieOption()
        setlineOption()
        linebox.value.removeAttribute('_echarts_instance_')
        lineAndBarBox.value.removeAttribute('_echarts_instance_')
        pieBox.value.removeAttribute('_echarts_instance_')
        createLineEchart()
        createLineAndBarEchart()
        createPieEchart()
    },3600000)
    window.onresize = ()=>{
        clearTimeout(timeout.value)
        timeout.value = setTimeout(()=>{
            linebox.value.removeAttribute('_echarts_instance_')
            lineAndBarBox.value.removeAttribute('_echarts_instance_')
            pieBox.value.removeAttribute('_echarts_instance_')
            createLineEchart()
            createLineAndBarEchart()
            createPieEchart()
        },3000)
    }
    
}

onMounted(async ()=>{
    // 获取数据，创建图表
    getProgressList()
    getBadModelList()
    getExcellentRateList()
    getDetailList()
    getDetailedList()
    getInspectionList()
    getProductionList()
    getCurveList()
    setLineAndBarOption()
    setPieOption()
    setlineOption()
    createPieEchart()
    createLineAndBarEchart()
    createLineEchart()
    updataList()
})
onUnmounted(()=>{
    window.onresize = null
    clearTimeout(timeout.value)
    clearInterval(intervaltime.value)
})
</script>

<style scoped>
.maintenance{
    width: 100%;
    margin: 10px 0;
    height: calc((100% - 60px)/3);
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
} 
.maintenancebox{
    height: calc(100% - 30px);
    width: 100%;
}
.line{
    width: 100%;
    height: calc(100% - 30px);
}
.curve{
    margin: 10px 0;
    width: 100%;
    height: calc((100% - 60px)/3);
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
}
.right{
    flex: 5;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.center{
    flex: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.excellentRate{
    height: calc((100% - 40px)/5*3);
    margin: 10px 0;
    background-color: rgb(0, 15, 76);
    border: 1px solid rgb(126, 180, 255);
    box-shadow: inset 0px 0px 5px 5px rgba(177, 234, 252, 0.429);
    position: relative;
}
.lineAndBar{
    height: 100%;
    width: 100%;
    padding: 0 10px;
}
.center_bottom{
    width: 100%;
    height: calc((100% - 40px)/5*2);
    margin: 10px 0;
    display: flex;
}
.detailLight{
    box-shadow: inset 0px 0px 8px 8px rgba(0, 208, 255, 0.5);
}
.Row{
    display: flex;
    height: 30px;
    width: 100%;
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 0;
    line-height: 30px;
}
.firstRow{
    display: flex;
    height: 30px;
    width: 100%;
    font-size: 16px;
    color: rgb(96, 208, 245);
    text-shadow: 0 0 0;
    font-weight: 900;
    overflow: hidden;
    line-height: 30px;
}
.inspection{
    width: 100%;
    margin: 10px 0;
    height: calc((100% - 60px)/3);
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
}
.inspectionbox{
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
}
.inspectionbox::-webkit-scrollbar{
    width: 0;
}
.detailsbox{
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
}
.detailsbox::-webkit-scrollbar{
    width: 0;
}
.detailing{
    width: calc((100% - 20px)/5*3);
    margin-right: 20px;
    height: 100%;
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
}
.detailed{
    width: calc((100% - 20px)/5*2);
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
}
.left{
    flex: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.productionitem{
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
 .movebox{
    animation-name: scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 15s;
    animation-play-state: running;
}
.movebox:hover{
    animation-play-state: paused;
}
.allProductionModel{
    width: 100%;
    height: calc(100% - 30px);
    text-align: center;
    overflow: auto;
}
 @keyframes scroll {
    0% {
    transform: translateY(0);
    }
    100% {
    transform: translateY(-100%);
    }
}
.allProductionModel::-webkit-scrollbar{
    width: 0;
}
.productionModel{
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
    background-color: rgba(255, 255, 255, 0.118);
    height:  calc((100% - 60px)/100*20);
    margin: 10px 0;
}
.progress{
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
    height:  calc((100% - 60px)/100*35);
    margin: 10px 0;
    position: relative;
}
.allProgress{
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: calc(100% - 30px);
}
.allProgress::-webkit-scrollbar{
    width: 0;
}
.boxTitle{
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
}
.badModel{
    border: 1px solid rgb(5, 101, 235);
    box-shadow: 0px 0px 3px 3px rgb(177, 234, 252);
    height: calc((100% - 60px)/100*45);
    margin: 10px 0;
}
.pie{
    width: 100%;
    height: calc(100% - 30px);
}
.main_item{
    margin: 20px 10px 0 10px;
}
.main{
    display: flex;
    width: 100%;
    height: calc(100% - 70px);
    position: relative;
}
.page{
    height: 100%;
    color: rgb(193, 198, 205);
    text-shadow: 1px 1px 3px rgb(216, 216, 216);
}
</style>